@import "tailwindcss";
@import "tailwindcss-animated";

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}


@theme {
  --animate-fadeInUp: fadeInUp 1s ease both;
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(70px);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
    }
  }
}


body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom,
      transparent,
      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  opacity: 1;
}

html {
  scroll-behavior: smooth;
}



img,
video,
iframe {
  max-width: 100%;
  height: auto;
}